<template>
  <div>
    <h3>计算属性</h3>
    <input type="text" v-model.lazy="xing">
    <input type="text" v-model.lazy="ming">
    <input type="text" v-model.lazy="fullName">
    
  </div>
</template>

<script>

export default {
  data(){
    return {
      xing: '张',
      ming:'三'
    }
  },
  // 计算属性写在data平级的computed中
  computed:{
    // 计算属性,都写到这里 要有返回值
    // fullName(){
    //   console.log('计算属性调用了');
    //   return this.xing + this.ming
    // }

  // 如果修改计算属性的值,需要写成计算格式 (对象中要写get和set方法)
  fullName:{
    get(){
      // 当获取计算属性值的时候，就会调用 get 方法
        return this.xing + this.ming
    },
    set(value){
        // 当修改计算属性值的时候，就会执行 set 方法
      // value 就是修改后的计算属性值
      let arr = value.split(' ')
      this.xing = arr[0]
      this.ming = arr[1]
    }
  }

  },
  
  
}
</script>

<style>

</style>